<template>
    <div class="container" :style="computedContainerStyle">
        <!-- <div v-if="left" :class="['drag-box-size', dragSizeStatus ? '' : 'drag-box-size__resize']" @click="() => { dragSizeStatus = !dragSizeStatus }">
            <i :class="dragSizeStatus ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right' "></i>
        </div> -->
        <div :class="['leftContainer', dragSizeStatus ? '' : 'leftContainer__resize']" v-show="left">
            <slot name="left"></slot>
        </div>
        <div class="rightContainer">
            <div class="user_search" v-show="search">
                <slot name="search" />
            </div>
            <div class="table_list">
                <div class="table">
                  <slot name="list" />
                </div>
                <div class="footer">
                  <slot name="footer" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
    export default {
        data() {
            return {
                dragSizeStatus: true
            }
        },
        props: {
            left: {
                type: Boolean,
                default: true
            },
            search: {
                type: Boolean,
                default: true
            }
        },
        computed:{
           ...mapState({
            direction: (state) => state.settings.direction,
            tagsView: (state) => state.settings.tagsView
          }),
          computedContainerStyle(){
            return{
              height: this.direction == 'horizontal' ? '100%' : 'calc(100vh - 60px)'
            }
          }
        }

    }
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    display: flex;
    width: 100%;
    overflow: hidden;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 3px;
    // text-shadow:0 0 10px &defaultBlue,0 0 20px &defaultBlue;
    // box-shadow:0 0 1px red;

}
.leftContainer {
    width: 250px;
    height: 100%;
    box-sizing: border-box;
    background: #ffffff;
    // margin-right: 10px;
    box-shadow: 0px 2px 6px 0px rgba(3,0,0,0.02);
    transition: all .3s linear;
    border-right:1px solid #dcdcdc;
}
.leftContainer__resize {
    width: 10px !important;
    overflow: hidden;
    transition: all .3s linear;
}
.rightContainer {
    display: flex;
    flex: 1;
    height: 100%;
    flex-direction: column;
    box-shadow: 0px 2px 6px 0px rgba(3,0,0,0.02);
    width: calc(100vw - 320px);
    overflow: hidden;
}
.user_search {
    background: #ffffff;
    padding: 10px;
    // margin-bottom: 10px;
}
.user_condition {
    background: #ffffff;
    padding: 8px 8px 0 8px;
}
.table_list {
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    padding: 10px;
    box-sizing: border-box;
}
.footer{
  height: 40px;
}
.table{
  flex:1;
  overflow: hidden;

}
</style>
